<template>
    <div class="content">
        <div class="header">
            <Breadcrumb class="w-80 ml-24 d-flex align-items-center   h-100 mr-auto" style="background-color:#fff;border-radius: 4px" separator=">">
                <div class="background-image3 header-icon "></div>
                <div class=" mx-12">当前位置:</div>
                <BreadcrumbItem style="color: #989898">
                    首页
                </BreadcrumbItem>
                <BreadcrumbItem>
                    职位
                </BreadcrumbItem>
                <BreadcrumbItem>
                    {{ dataResult.name }}
                </BreadcrumbItem>
            </Breadcrumb>
            <div class="d-flex-align-center px-20 mr-8 cursor-pointer" style="height: 30px; color:white;background-color: #3190fd; border-radius: 4px">
                <div class="cursor-pointer" @click="$router.back()">返回</div>
            </div>
        </div>
        <div class="info">
            <div class="info-left">
                <div class="background-image1 info-left-title">
                    <div class="w-100 d-flex fs-28  color-white ">
                        <div class=" mr-auto">
                            {{ dataResult.name }}
                        </div>
                        <div>{{ dataResult.minSal }}k-{{ dataResult.maxSal }}k</div>
                    </div>
                    <div class="w-100 d-flex fs-18 " style="color:#d1e4ff">
                        <div class="mr-auto">{{ dataResult.nature }} | {{ dataResult.location }} | {{ dataResult.dataResult }}</div>
                        <div>招聘人数：{{ dataResult.number }}人</div>
                    </div>
                    <div class="w-100 d-flex fs-18 " style="color:#d1e4ff">
                        <div class="mr-auto">
                            {{ dataResult.title }}
                        </div>
                    </div>
                    <div class="w-100 d-flex  ">
                        <template v-for="item in dataResult.skill.split(',')">
                            <Tag color="primary" size="large">{{ item }}</Tag>
                        </template>
                    </div>
                </div>
                <div class="info-content">
                    <div class="info-content-title">
                        <div class="fs-14 fw-6">
                            职位详情
                        </div>
                        <div>
                            <!--                            <Button type="primary" @click="open_info_tost">投递简历</Button>-->
                            <!--                            <Button @click="detailsCollectionJobs">收藏职位</Button>-->
                        </div>
                    </div>
                    <div class="info-content-text">
                        <pre class="p-12 fs-14 p-32" style="white-space: pre-wrap;">{{ dataResult.jobDetails }}</pre>
                    </div>
                </div>
                <div class="info-address">
                    <div class="info-content-title">
                        <div class="fs-14 fw-6">工作地址</div>
                    </div>
                    <div>
                        <pre class="p-12 fs-14" style="white-space: pre-wrap;">{{ dataResult.fullAddress }}</pre>
                    </div>
                    <div class="p-12">
                        <div ref="companyAddressRef1" id="mapID" class="info-address-map"></div>
                    </div>
                </div>
            </div>
            <div class="info-right">
                <div class="background-image2 info-right-qr ">
                    <!--                    <img ref ="qrCodeRef">-->

                    <!--                    </img>-->
                    <!--                    <pre class="fs-14">{{ preText3 }}</pre>-->
                </div>
                <div class="info-right-info">
                    <div class="info-right-info-title">
                        <div></div>
                        <div class="ml-20">
                            单位信息
                        </div>
                    </div>
                    <div class="info-right-info-content">
                        <div>
                            <div style="color: #999999">
                                单位名称
                            </div>
                            <pre class="fs-14" style="white-space: pre-wrap;">{{ dataResult.unitName }}</pre>
                        </div>
                        <div>
                            <div style="color: #999999">
                                单位性质
                            </div>
                            <pre class="fs-14" style="white-space: pre-wrap;">{{ dataResult.unitQuality }}</pre>
                        </div>
                        <div>
                            <div style="color: #999999">
                                单位规模
                            </div>
                            <pre class="fs-14" style="white-space: pre-wrap;">{{ dataResult.employeeNumber }}</pre>
                        </div>
                        <div>
                            <div style="color: #999999">
                                所属行业
                            </div>
                            <pre class="fs-14" style="white-space: pre-wrap; ">{{ dataResult.unitIndustry }}</pre>
                        </div>
                        <div>
                            <div style="color: #999999">
                                单位业务
                            </div>
                            <pre class="fs-14" style="white-space: pre-wrap;">{{ dataResult.businessField }}</pre>
                        </div>
                        <div>
                            <div style="color: #999999">
                                单位网址
                            </div>
                            <pre class="fs-14" style="cursor: pointer;white-space: pre-wrap;color: #6177ff" @click="openTheWebsite">{{ dataResult.officialWebsite }}</pre>
                        </div>
                        <div>
                            <div style="color: #999999">
                                单位地址
                            </div>
                            <pre class="fs-14" style="white-space: pre-wrap;">{{ dataResult.fullAddress }}</pre>
                        </div>
                    </div>
                </div>
                <div class="image_border cursor-pointer ">
                    <img @click="handleSearch" src="../mutualSelection/images/天眼查.jpg" class="image_body" />
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { windowOpen } from 'echarts/lib/util/format';
import { collectionPositionAPI, jobDetailsAPI, sendOneSResumeAPI } from '@/api/Main/positionApis';
import { updateVal } from '@/util/ObjectUtil';
// import QRCode from 'qrcode'
export default {
    computed: {
        myValue() {
            return sessionStorage.getItem('positionDetail');
        }
    },

    data() {
        return {
            text: '测试公司名称',
            preText1:
                '岗位内容：\n' +
                '1、自动化控制工程师岗位（软件）；掌握自动化PLC编程（类似如三菱/欧姆龙/西门子等），编程设计或其他编程的任意一种即可，入职后有专业的技能培训；\n' +
                '工作内容主要是进行设备控制程序的设计及制作，Setup维护及issue检测；\n' +
                '2、本科及以上学历，专业要求如 电气工程及其自动化、电气自动化、自动化、电气设计、控制工程、测控技术及仪器等相关专业；\n' +
                '3、熟悉PLC程序设计工作优先考虑，往届应届生均可，需要可以接受3-6个月以上/每年的出差！（出差期间发送相关补助与津贴，后期也有岗位晋升薪资，出差期间待遇较为优厚）；\n' +
                '4、之前未应聘过公司的正式工，派遣工及临时工；\n' +
                '5、工作认真负责，有责任心、吃苦耐劳及服从安排；\n' +
                '6、本人不得隐瞒身体患有疾病，需主动告知。\n' +
                '\n' +
                '公司福利：\n' +
                '1、薪资福利：工资根据威海市薪资基准，按一定周期进行薪酬整体调整；应届本科/研究生入职满一年有政府的《博士、硕士住房补贴》、《万名大学生聚集补贴》等奖励津贴；每年薪资都有调整，且职位职务晋升后薪资有较大幅度涨幅。\n' +
                '2、保险公积金： 缴纳五险一金，养老保险/医疗保险/失业保险/工伤保险/生育保险和住房公积金\n' +
                '3. 各项补贴：其他各类补贴齐全，如住宿/餐补/交通/通讯/高温补贴/岗位补贴等\n' +
                '4、餐厅公寓：员工餐厅，提供早中晚三餐，每餐有餐费补贴；公寓配有WIFI，空调，暖气，热水器\n' +
                '5、工作时间：日常8:30-17:30，周末双休；有工作需要需要进行加班对应，加班费另算，工作日加班费晚上1.5倍，周末加班费2倍，法定加班费3倍\n' +
                '6、员工福利：定期组织会餐，workshop等团建活动，节假日员工福利等\n' +
                '7、员工休假：带薪年假，享有国家规定的法定休假，如五一、十一、清明、端午、春节等法定节假日休假；享有各种假期补贴，如婚丧补贴，生育津贴等\n' +
                '8.、出差补贴：员工出差期间根据出差地和时长不同，国内1800-5400元每月不等\n' +
                '9、各类奖项：激励奖金丰厚，销售目标奖，品质改善奖，零残件品质奖，研发岗技能Level奖，青鸟奖等\n' +
                '10.、晋升通道：完善的晋升体系，职务职级，管理技术双通道晋升\n' +
                '\n' +
                '工作时间：\n' +
                '周一至周五，8:30-17:30，周末双休。如有加班，另外支付加班补贴。\n' +
                '平日1.5倍周末2倍法定日3倍。\n' +
                '公司中国总务位于山东威海，威海经济技术开发区贝卡尔特88-1号威海电美世光机电有限公司，\n' +
                '有意向请直接投递简历即可。',
            preText2: '浙江省杭州市萧山区盈丰街道民和路886号朝龙汇大厦1号楼34楼',
            preText3: '毕业生\n' + '微信扫码投递',
            dataResult: {
                businessField: '',
                eduRequire: '',
                employeeNumber: '',
                fullAddress: '',
                jobCategory: '',
                jobDetails: '',
                location: '',
                maxSal: 0,
                minSal: 0,
                name: '',
                nature: '',
                number: 0,
                officialWebsite: '',
                skill: '',
                unitIndustry: '',
                unitLogo: '',
                unitName: '',
                unitQuality: '',
                title: ''
            },
            dataRow: null,
            loggedInState: null,
            map: null // 地图
        };
    },
    mounted() {
        if (sessionStorage.getItem('xs_userInfo')) {
            this.loggedInState = JSON.parse(sessionStorage.getItem('xs_userInfo')).resource;
        }
        // if(this.$route.params.dataRow){
        //   this.companyCenter=this.$route.params.companyCenter
        //   this.dataRow=this.$route.params.dataRow
        // }
        // const routeParams = sessionStorage.getItem('positionDetail');
        // if (routeParams) {
        //   this.dataRow=JSON.parse(routeParams).dataRow
        // } else {
        //   sessionStorage.setItem('positionDetail', JSON.stringify(this.$route.params.dataRow));
        //   this.dataRow=this.$route.params.dataRow
        // }

        const localData = this.myValue;
        // 拿url query
        const positionIdQuery = this.$route.query.positionId;
        const enterpriseIdQuery = this.$route.query.enterpriseId;

        if (positionIdQuery && enterpriseIdQuery) {
            this.dataRow = {
                positionId: positionIdQuery,
                enterpriseId: enterpriseIdQuery
            };
        } else if (localData) {
            this.dataRow = JSON.parse(localData).dataRow;
        } else {
            sessionStorage.setItem('positionDetail', JSON.stringify(this.$route.params.dataRow));
            this.dataRow = this.$route.params.dataRow;
        }

        this.detailData();
        this.initMap();

        // 加载二维码
        // QRCode.toDataURL(window.location)
        //     .then(url => {
        //        this.$refs.qrCodeRef.src=url
        //     })
        //     .catch(err => {
        //         console.error(err)
        //     })
    },
    methods: {
        detailData() {
            jobDetailsAPI({
                enterpriseId: this.dataRow.enterpriseId,
                positionId: this.dataRow.positionId
            }).then(res => {
                updateVal(this.dataResult, res.result);
            });
        },
        initMap() {
            this.map = new AMap.Map(this.$refs.companyAddressRef1, {
                securityJsCode: '72e4082b75ddb9a2a5bd5fca3d7f787e',
                resizeEnable: true,
                center: [116.397083, 39.874531],
                zoom: 17
            });
            const marker = new AMap.Marker({
                position: new AMap.LngLat(116.397083, 39.874531),
                anchor: 'bottom-center'
            });
            this.map.add(marker);
        },
        openTheWebsite() {
            window.open(this.dataResult.officialWebsite);
        },
        // region TODO 投递简历模态框
        open_info_tost() {
            this.$confirm(
                '<strong><img class="w_100p h_80p" src="https://guli-file-125211.oss-cn-beijing.aliyuncs.com/wxapp-talent/web/postes_image.png"> <div class="fs-16">确定向<span class="text_color_1677ff">' +
                    this.dataResult.unitName +
                    '</span>发送简历吗？</div><div class="fs-14 fw-1">投递的职位：' +
                    this.dataResult.name +
                    ',您的简历会直接推送给企业</div></strong>',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    showClose: false,
                    dangerouslyUseHTMLString: true,
                    center: true
                }
            )
                .then(() => {
                    this.detailsSubmitResume();
                })
                .catch(() => {});
        },
        // region TODO 投递简历
        detailsSubmitResume() {
            if (this.loggedInState !== '4') {
                this.$router.push({
                    name: 'login',
                    params: { type: 'student' }
                });
            } else {
                sendOneSResumeAPI({
                    enterpriseId: this.dataRow?.enterpriseId || 0,
                    jobId: this.dataRow?.positionId || 0
                }).then(res => {
                    if (res.code == 200) {
                        this.$Message.success(res.message);
                    }
                });
            }
        },
        // endregion
        // region TODO 收藏职位
        detailsCollectionJobs() {
            if (this.loggedInState !== '4') {
                this.$router.push({
                    name: 'login',
                    params: { type: 'student' }
                });
            } else {
                collectionPositionAPI({
                    positionId: this.dataRow?.positionId || 0
                }).then(res => {
                    if (res.code == 200) {
                        this.$Message.success(res.message);
                    }
                });
            }
        },
        // endregion
        // 天眼查
        handleSearch() {
            window.open('https://www.tianyancha.com/search?key=' + this.dataResult.unitName);
        }
    }
};
</script>
<style scoped lang="less">
.background-image1 {
    background-image: url('images/jobDetailsBackground1.png');
}
.background-image2 {
    background-image: url('images/jobDetailsBackground2.png');
}
.background-image3 {
    background-image: url('images/jobDetailsBackground3.png');
}
.image_border {
    width: 100%;
    height: 100px;
    border-radius: 8px;
}
.image_body {
    width: 100%;
    border-radius: 8px;
}
.content {
    width: 90%;
    margin: 0 auto;
}
.header {
    height: 50px;
    background-color: white;
    margin-bottom: 12px;
    margin-top: 12px;
    display: flex;
    align-items: center;
}
.header-icon {
    width: 30px;
    height: 30px;
    background-size: cover;
}
.info {
    display: flex;
    justify-content: space-between;
}
.info-left {
    width: 1150px;
}
/*带背景的*/
.info-left-title {
    width: 1150px;
    height: 250px;
    background-size: cover;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-right: 40px;
    padding-left: 40px;
}
.info-left-title > div {
    display: flex;
    align-items: center;
}
.info-left-title > div:nth-child(1) {
    margin-bottom: 12px;
    margin-top: 48px;
    font-size: 24px;
}
.info-left-title > div:nth-child(2) {
    font-size: 24px;
    margin-bottom: 8px;
}
.info-left-title > div:nth-child(3) {
    font-size: 24px;
    margin-bottom: 12px;
}

.info-left-title > div:nth-child(4) {
    height: 40px;
}

/*职位详情*/
.info-content {
    margin-top: 12px;
    background-color: #fff;
}
/*职位详情标题*/
/*工作地址也用这个*/
.info-content-title {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 12px;
    padding-right: 12px;
}
/*职位详情文字*/
.info-content-text {
    min-height: 500px;
}
.info-address {
    background-color: #fff;
    margin-top: 12px;
    margin-bottom: 12px;
}
.info-address-map {
    height: 300px;
    width: 100%;
}
.info-right {
    width: 300px;
}
/*二维码框*/
.info-right-qr {
    width: 100%;
    height: 250px;
    background-size: cover;
    display: flex;
    align-items: center;
    padding: 12px;
}
/*二维码*/
.info-right-qr > img {
    width: 160px;
    height: 160px;
    margin-right: 12px;
}

/*单位信息*/
.info-right-info {
    background-color: white;
    margin-top: 12px;
    margin-bottom: 12px;
}
/*单位信息的标题*/
.info-right-info-title {
    height: 46px;
    color: #1c7dff;
    font-size: 16px;
    font-weight: 600;

    display: flex;
    align-items: center;
}
/*单位信息的小竖杠*/
.info-right-info-title > div:nth-child(1) {
    background-color: #1c7dff;
    width: 5px;
    height: 24px;
    border-radius: 5px;
}
/*单位信息列表*/
.info-right-info-content {
    padding-left: 12px;
    font-size: 16px;
}
/*单位信息列表每一个item*/
.info-right-info-content > div {
    padding: 10px 0px;
}

::v-deep .ivu-tag-text {
    font-size: 16px;
}
</style>
